<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>回收企业列表</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="mb-2"
                         style="margin-bottom:40px">
                        <Button custom-icon="iconfont icon-fangkuai2"
                                size="small"
                                type="primary"
                                @click="showCreateModal"
                                style="float:right">
                            新建企业
                        </Button>
                        <!-- <Col span="3"
                             class="mr-10">
                        <Select placeholder="请选择状态"
                                 @on-change="changeCode"
                                class="mr-10"
                                v-model="queryData.state"
                                :clearable=true>
                            <Option v-for="item in level1Modal.options"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                        </Col> -->
                        <!-- <Col span="7">
                        <sele @ProvinceData="childByValue1"></sele>
                        </Col> -->
                        <Col span="4" class="mr-10">
                        <Input v-model="queryData.companyName"
                               placeholder="回收企业名称"
                               
                               clearable
                               />
                        </col>

                        <Button type="primary"
                                custom-icon="iconfont icon-chaxun"
                                size="small"
                                @click="iQueryData">查找</Button>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table :columns="columns"
                               :data="list.data"
                               border></Table>
                    </div>
                    <Page :total="queryData.totalRecord"
                          :current="queryData.page"
                          :page-size="queryData.limit"
                          show-total
                          show-elevator
                          show-sizer
                          @on-change="changePage"
                          @on-page-size-change="changePageSize"
                          style="text-align: center;" />
                </div>
            </div>
            <!-- 新建-->
            <Modal v-model="level1Modal.modal1"
                   :title="level1Modal.title"
                   @on-ok="postData"
                   @on-cancel="cancel"
                   height="600px">
                <Form :model="level1Modal.formData"
                      :rules="level1Modal.ruleValidate"
                      ref="systemFro"
                      :label-width="130">
                    <FormItem label="回收企业名:"
                              prop="companyName">
                        <Input v-model="level1Modal.formData.companyName"

                               placeholder="请输入企业名称"
                               style="width:350px;"></Input>
                    </FormItem>
                    <FormItem label="回收企业地址:"
                              prop="companyAddress">
                        <Input v-model="level1Modal.formData.companyAddress"
                               placeholder="请输入企业地址"
                               style="width:350px;"></Input>
                    </FormItem>
                    <FormItem label="联系人"
                              prop="contacts">
                        <Input v-model="level1Modal.formData.contacts"
                               placeholder="请输入联系人"
                               style="width:350px;"></Input>
                    </FormItem>
                    <FormItem label="联系电话"
                              prop="phone">
                        <Input v-model="level1Modal.formData.phone"
                               placeholder="请输入联系人"
                               style="width:350px;"></Input>
                    </FormItem>
                    <FormItem label="手机号码"
                              prop="mobile">
                        <Input v-model="level1Modal.formData.mobile"
                               placeholder="请输入手机号码"
                               style="width:350px;"></Input>
                    </FormItem>
                    <!-- <FormItem label="状态"
                              prop="state">

                        <Select @on-change="changeCode"
                                clearable
                                label-in-value="true"
                                v-model="level1Modal.formData.state"
                                style="width:350px;">
                            <Option v-for="item in level1Modal.options"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>

                    </FormItem> -->
                    <FormItem label="地区">
                        <Col span="24"
                             class="mr-10">
                        <sele @ProvinceData="childByValue"
                              massage="1"></sele>
                        </Col>
                    </FormItem>
                </Form>
            </Modal>

            <!-- 回收网点弹层 -->
            <Modal v-model="level2Modal.modal2"
                   :title="level2Modal.title"
                   fullscreen
                   height="600px">
                <recycleSite :companyData="level2Modal.formData" v-if="companyFlag"></recycleSite>
            </Modal>
            <!-- 回收企业管理员弹层 -->
            <Modal v-model="level3Modal.modal3"
                   :title="level3Modal.title"
                   fullscreen
                   height="600px">
                <companyAdmin :companyAdminData="level3Modal.formData" v-if="companyAdminFlag"></companyAdmin>
            </Modal>
            <!-- 回收企业回收价格弹层 -->
            <Modal v-model="level5Modal.modal5"
                   :title="level5Modal.title"
                   fullscreen
                   height="600px">
                <companyScore :companyScoreData="level5Modal.formData" v-if="companyScoreFlag"></companyScore>
            </Modal>
        </div>
    </div>
</template>
<script>
import sele from '@/view/test/city.vue'
import RecycleCompanyApi from '@/api/recycle/company.js'
import recycleSite from './site.vue'
import companyAdmin from './components/companyAdmin.vue'
import companyScore from './components/companyScore.vue'


export default {
	// 引入 注册(千万不能少)
	components: {
		sele,
		recycleSite,
        companyAdmin,
        companyScore
	},
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10,
				// companyName: ''
			},
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				{
					title: '回收企业名称',
					key: 'companyName',
					align: 'center'
				},
				{
					title: '回收企业地址',
					key: 'companyAddress',
					align: 'center'
				},

				{
					title: '联系人',
					key: 'contacts',
					align: 'center'
				},
				{
					title: '联系电话',
					key: 'phone',
					align: 'center'
				},
				{
					title: '手机号码',
					key: 'mobile',
					align: 'center'
				},
				{
					title: '是否可更改回收价格',
					key: 'state',
					align: 'center',
					render: (h, params) => {
						let s = params.row.state
						return h('i-switch', {
							props: {
								value: s,
								size: 'large'
							},
							scopedSlots: {
								open: () => h('span', '是'),
								close: () => h('span', '否')
							},
							on: {
								'on-change': value => {
									this.changeState(params.row, value)
								}
							}
						})
					}
				},
				{
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '创建时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						return h('div', { class: 'action-group' }, [
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '回收网点'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'success',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													// this.showUpdateModal(params.index);
													this.showSite(
														// params.row.id,
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'ios-apps',
													size: 18
												}
											})
										]
									)
								]
							),
                            h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '回收企业管理员'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'info',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showAdminModal(params.row);
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'md-contact',
													size: 18
												}
											})
										]
									)
								]
							),
                            h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '企业回收价格'
									},
									style: {
										cursor: 'pointer'   
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'warning',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showScoreModal(params.row);
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'logo-bitcoin',
													size: 18
												}
											})
										]
									)
								]
							),
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '编辑'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),

							h(
								'Tooltip',
								{
									props: {
										placement: 'right',
										content: '删除'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'error',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.delData(params.row)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-shanchusekuai',
													size: 18
												}
											})
										]
									)
								]
							)
						])
						// }
					}
				}
			],
			list: {
				data: [
					// {
					// 	// id: 1,
					// 	contacts: '王珍',
					// 	companyName: '杭州哈哈哈再生资源回收公司',
					// 	companyAddress: '杭州市之江路1999号',
					// 	phone: '0571-88012465',
					// 	mobile: '13566677788',
					// 	state: 0
					// }
				]
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {
					state: 'false'
					// area: []
				},
				ruleValidate: {
					companyName: [
						{
							required: true,
							message: '请输入企业名称',
							trigger: 'blur'
						}
					],
					companyAddress: [
						{
							required: true,
							message: '请输入企业地址',
							trigger: 'blur'
						}
					],
					contacts: [
						{
							required: true,
							message: '请输入联系人',
							trigger: 'blur'
						}
					],
					mobile: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号码格式不正确',
							trigger: 'blur'
						}
					],
					state: [{ required: true, message: '请选择状态' }],
					area: [
						{
							required: true,
							type: 'array',
							min: 1,
							message: '请选择省市区'
						}
					]
				},
				options: [
					{
						value: 0,
						label: '不可自定义回收价格'
					},
					{
						value: 1,
						label: '可自定义回收价格'
					}
				]
			},
			level2Modal: {
				modal2: false,
				title: '回收网点列表',
				formData: {}
			},
            level3Modal: {
				modal3: false,
				title: '回收企业管理员列表',
				formData: {}
			},
            level5Modal: {
				modal5: false,
				title: '回收企业价格列表',
				formData: {}
			},
            companyFlag:false,
            companyAdminFlag:false,
            companyScoreFlag:false,
		}
	},
	mounted() {
		this.getPageList()
	},
	computed: {},
	methods: {
		async getPageList() {
            
			let data = (await RecycleCompanyApi.getPageList(this.queryData))
				.data
			this.list.data = data.list
			this.queryData.limit = data.pageSize
			this.queryData.page = data.pageNum
			this.queryData.totalRecord = data.totalRecord
            console.log(data,'111111111111111111111111111111111')
		},
		// 查询
		iQueryData() {
            this.queryData.page = 1
			this.getPageList()
		},
		showCreateModal() {
			this.level1Modal.modal1 = true
			this.level1Modal.title = '新建企业'
		},
		//地区赋值
		childByValue(data) {
			this.level1Modal.formData.provId = data.provid || ''
			this.level1Modal.formData.cityId = data.cityid || ''
			this.level1Modal.formData.distId = data.distid || ''
			this.level1Modal.formData.strtId = data.strtid || ''
			this.level1Modal.formData.commId = data.commid || ''
			this.level1Modal.formData.comminId = data.comminid || ''
		},
		// 查询按钮地区赋值
		childByValue1(data) {
            console.log(data,'1111111111111111111111')
			this.queryData.provId = data.provid || ''
			this.queryData.cityId = data.cityid || ''
			this.queryData.distId = data.distid || ''
			this.queryData.strtId = data.strtid || ''
			this.queryData.commId = data.commid || ''
			this.queryData.comminId = data.comminid || ''
		},
		postData() {
			let that = this
			this.$refs['systemFro'].validate(valid => {
				if (valid) {
					if (!that.level1Modal.formData.id) {
						RecycleCompanyApi.add(that.level1Modal.formData).then(
							res => {
								if (res.data) {
									that.$Message.success('添加成功')
									that.level1Modal.modal1 = false
									that.getPageList()
									this.$refs['systemFro'].resetFields()
									return
								} else {
									that.$Message.error(res.message)
								}
							}
						)
					} else if (that.level1Modal.formData.id) {
						//修改
						RecycleCompanyApi.update(
							that.level1Modal.formData
						).then(res => {
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level1Modal.modal1 = false
								that.getPageList()
								this.$refs['systemFro'].resetFields()
								return
							} else {
								that.$Message.error(res.message)
							}
						})

						// this.$refs['systemFro'].resetFields()
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
		changeCode(val) {       
            console.log(val,'val')
			if (val) {
				// this.level1Modal.formData.state = val.value
                this.queryData.state = val
                console.log(this.level1Modal.formData.state,'this.level1Modal.formData.state')
			}
		},
		// 修改弹层
		showUpdateModal(row) {
			this.level1Modal.modal1 = true
			this.level1Modal.title = '编辑企业信息'
			this.level1Modal.formData = {
				id: row.id,
				companyName: row.companyName,
				companyAddress: row.companyAddress,
				contacts: row.contacts ? row.contacts : '',
				phone: row.phone,
				mobile: row.mobile,
				state: row.state,
				provId: row.provId ? row.provId : '',
				cityId: row.cityId ? row.cityId : '',
				distId: row.distId ? row.distId : '',
				strtId: row.strtId ? row.strtId : '',
				commId: row.commId ? row.commId : '',
				comminId: row.comminId ? row.comminId : ''
			}
		},
		// 删除
		delData(row) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.companyName.toString() +
					'</strong> 吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					RecycleCompanyApi.del(row.id).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getPageList()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},  
		cancel() {
			this.$refs['systemFro'].resetFields()
		},
        // 展示回收站点弹层
		showSite(row) {
			if (row) {
                this.companyFlag = true
				this.level2Modal.modal2 = true
				this.level2Modal.formData = row
			}
		},
        // 展示回收管理员弹层
        showAdminModal(row) {
            if (row) {
                this.companyAdminFlag = true
				this.level3Modal.modal3 = true
				this.level3Modal.formData = row
			}
			
		},
         // 展示企业回收价格弹层
        showScoreModal(row) {
            if (row) {
                this.companyScoreFlag = true
				this.level5Modal.modal5 = true
				this.level5Modal.formData = row
			}
			
		},
        // 分页 当前页数
        changePage(page) {
            this.queryData.page = page
            this.getPageList()
		},
        // 每页条数limit
		changePageSize(pageSize) {
            this.queryData.limit = pageSize
            this.getPageList()
		},
         changeState(row, value) {
            console.log(value,'11111111111111111111111')
			let that = this
			this.$Modal.confirm({
				title: '确认修改',
				content:
					'<p>您确认修改id为 <strong>' +
					row.id +
					'</strong> 的 <strong>' +
					row.companyName  +
					'</strong> 的是否可以更改回收价格嘛 吗?</p>',
				loading: true,
				onOk: () => {
					var formData = {
						id: row.id,
						state: value
					}
					RecycleCompanyApi.update(formData).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							that.$Message.success('修改成功')
							that.level1Modal.modal1 = false
							that.getPageList()
                            // that.getAdminUnList()
							this.$refs['systemFro'].resetFields()
                            that.level1Modal.formData = {}
							return
						} else {
							this.$refs['systemFro'].resetFields()
							that.$Message.error(res.message)
						}
					})
				},
				onCancel: () => {
                    this.level1Modal.modal1 = false
					this.getPageList()
				}
			})
		},
	}
}
</script>
<style scoped>
</style>
